import './index.scss'
import {InputComponent} from '../../../componet'
import  Select from '../select';
import { useState,useEffect } from 'react'
import { Flex, Table } from 'antd';
import type { TableColumnsType} from 'antd';
import '../index.scss'
import axios from '../../../axios'
export default function Peopleliveserve() {
  type DataType1= {
    driction?:string,
    type?:string,
   status?:string,
    speople?:string,
    phone?:string,
    address?:string,
    inter?:string,
    process?:string,
    cpeople?:string
  }
  //查询表单 
  let [formData,setformData]=useState<DataType1>({
    driction:'',
    type:'',
   status:'',
    speople:'',
    phone:'',
    address:'',
    inter:'',
    process:'',
    cpeople:''
  })
  //处理状态
  let clist=['已处理','未处理']
  //事件类型
 let typeList=['民生服务','矛盾劝解','社情民意','治安防控','突发事件','其他']
 //处理流程
 let processlist=['自己办结','上报处理'] 
 //网络
 let interlist=['网络A','网络B','网络C']
//定义表格列类型
  interface DataType {
    key: React.Key;
    address: string;
  }
  //定义表格列
  const columns: TableColumnsType<DataType> = [
    { title: '事件描述', dataIndex: 'driction' },
    { title: '事件类型', dataIndex: 'type' },
    { title: '上报时间', dataIndex: 'time' },
    { title: '上报人', dataIndex: 'people' },
    { title: '联系电话', dataIndex: 'phone' },
    { title: '发生地址', dataIndex: 'address' },
    { title: '网络', dataIndex: 'inter' },
    { title: '处理流程', dataIndex: 'process' },
    { title: '处理状态', dataIndex: 'status' },
    { title: '处理人', dataIndex: 'cpeople' },
    { title: '处理结果', dataIndex: 'result' },
   
  ];
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  //定义表格数据
  // const dataSource = Array.from<DataType>({ length: 20 }).map<DataType>((_, i) => ({
  //   key: i,
  //   age: 32,
  //   description:'事件描述',
  //   type:'事件类型',
  //   time:'上报时间',
  //   people:'上报人',
  //   phone:'联系电话',
  //   address:'发生地址',
  //   inet:'网络',
  //   process:'处理流程',
  //   status:'处理状态',
  //   cpeople:'处理人',
  //   result:'处理结果',
  // }));
const [dataSource,setdataSource]=useState<DataType[]>([])
//修改事件描述
  const changeDriction = (e: string) => {
    let obj={...formData}
    obj.driction=e
    setformData(obj)
  }
  //修改上报人
  const changePeople = (e: string) => {
    let obj={...formData}
    obj.speople=e
    setformData(obj)
  }
  //修改事件类型
  const changeType = (e: string) => {
    let obj={...formData}
    obj.type=e
    setformData(obj)
  }
  //修改处理状态
  const changeStatus = (e: string) => {
    let obj={...formData}
    obj.status=e
    setformData(obj)
  }
  //修改处理流程
  const changeprocess = (e: string) => {
    let obj={...formData}
    obj.process=e
    setformData(obj)
  }
  //修改网络
  const changeinet = (e: string) => {
    let obj={...formData}
    obj.inter=e
    
    setformData(obj)
  }
let getdata=async (formdata:DataType1)=>{
let data:any= await axios.get('/Peopleliveserve',{params:formdata})
setdataSource(data.list)
   
}

  useEffect(()=>{
    getdata({})
  },[])
  const hasSelected = selectedRowKeys.length > 0;
  return (
    <div className='pabpeo'>
      <div className='header'>
<div className='pzbhbox'>
<span className='pableft'>事件描述</span> <InputComponent value={formData.driction as string} className='pzbright' onChange={changeDriction}></InputComponent>
</div>
<div className='pzbhbox'> <span className='pableft'>上报人</span> <InputComponent value={formData.speople as string} className='pzbright' onChange={changePeople}></InputComponent></div>
<div className='pzbhbox'>
 <span className='pableft'>事件类型</span> <Select clist={typeList} change={changeType} classname="pzbright"></Select>
 </div>
 <div className='pzbhbox'>
 <span className='pableft'>状态</span> <Select clist={clist} change={changeStatus} classname="pzbright" ></Select>
 </div>
 <div className='pzbhbox'>
 <span className='pableft'>处理流程</span><Select clist={processlist} change={changeprocess}  classname="pzbright"></Select>
 </div>
 <div className='pzbhbox'>
 <span className='pableft'>上报网络</span> <Select clist={interlist} change={changeinet}  classname="pzbright"></Select>
 </div>
  <button className='pzbbtn btn_red col_w' onClick={()=>{getdata(formData)}}>查询</button>
  <button className='pzbbtn' onClick={()=>{setformData({})}}>重置</button>
 
</div>
<div className='pabtable' style={{'overflowY':'scroll'}}>
<Flex gap="middle" vertical>
      <Flex align="center" gap="middle">
      
        {hasSelected ? `Selected ${selectedRowKeys.length} items` : null}
      </Flex>

      <Table columns={columns} dataSource={dataSource} ></Table>
    </Flex>
</div>

    </div>
  )
}
